/* Copyright (c) 2012 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* TODO(crbug.com/992819): unify root-type-icon and volume-type-icon into one
 type if possible, called file-type-icon or entry-type-icon say, since there
 is no real need for the root/volume icon distinction for the directory tree
 noting that file-type-icon is also used in lists and menus ;) */

 /* We are mixing background-image and -webkit-mask-image here for different
  SVGs.
   * For SVGs whose "fill" colors look okay in light/dark mode, e.g.
   filetype_audio.svg has red color, we need to use background-image to
   keep the original color.
   * For SVGs whose "fill" colors look not okay, e.g. filetype_generic.svg,
   we need to use -webkit-mask-image together with background-color to
   customize the color.
   * By default -webkit-mask-image is used because the default SVG is
   filetype_generic.svg. In order to use background-image to override,
   we need to reset both -webkit-mask-image and background-color. */

/* Small icons for file types, used in lists and menus. */
[file-type-icon] {
  -webkit-mask-image: url(../images/filetype/filetype_generic.svg);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  background-color: currentColor;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
}

[file-type-icon='archive'] {
  -webkit-mask-image: url(../images/filetype/filetype_archive.svg);
}

[file-type-icon='audio'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_audio.svg);
}

[file-type-icon='excel'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_excel.svg);
}

[file-type-icon='folder'] {
  -webkit-mask-image: url(../images/filetype/filetype_folder.svg);
}


body.check-select #list-container li[selected] [file-type-icon] {
  -webkit-mask-image: none;
  background: none;
}

.computers-root[file-type-icon='folder'] {
  -webkit-mask-image: url(../images/volumes/computer.svg);
}

.external-media-root[file-type-icon='folder'] {
  -webkit-mask-image: url(../images/volumes/usb.svg);
}

.shared[file-type-icon='folder'] {
  -webkit-mask-image: url(../images/filetype/filetype_folder_shared.svg);
}

.team-drive-root[file-type-icon='folder'] {
  -webkit-mask-image: url(../images/volumes/hard_drive.svg);
}

/* .tree-row > .file-row icon for files-ng.  */
.tree-row > .file-row > [file-type-icon='folder'] {
  -webkit-mask-image: url(../images/filetype/filetype_folder.svg);
}

.tree-row > .file-row > .shared[file-type-icon='folder'] {
  -webkit-mask-image: url(../images/filetype/filetype_folder_shared.svg);
}

.tree-row > .file-row > .team-drive-root[file-type-icon='folder'] {
  -webkit-mask-image: url(../images/filetype/filetype_team_drive.svg);
}

[file-type-icon='gdoc'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_gdoc.svg);
}

[file-type-icon='gdraw'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_gdraw.svg);
}

[file-type-icon='glink'] {
  -webkit-mask-image: url(../images/filetype/filetype_generic.svg);
}

[file-type-icon='gsheet'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_gsheet.svg);
}

[file-type-icon='gslides'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_gslides.svg);
}

[file-type-icon='gtable'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_gtable.svg);
}

[file-type-icon='gform'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_gform.svg);
}

[file-type-icon='gmap'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_gmap.svg);
}

[file-type-icon='gsite'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_gsite.svg);
}

[file-type-icon='image'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_image.svg);
}

[file-type-icon='pdf'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_pdf.svg);
}

[file-type-icon='ppt'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_ppt.svg);
}

[file-type-icon='script'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_script.svg);
}

[file-type-icon='sites'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_sites.svg);
}

[file-type-icon='smb'] {
  -webkit-mask-image: url(../images/volumes/smb.svg);
}

[file-type-icon='tini'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_tini.svg);
}

[file-type-icon='video'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_video.svg);
}

[file-type-icon='word'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_word.svg);
}

/* Large generic thumbnails, used when a file does not have a thumbnail. */
.no-thumbnail[generic-thumbnail] {
  -webkit-mask-image: url(../images/files/ui/filetype_placeholder_generic.svg);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 48px;
  background-color: currentColor;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 48px;
}

.no-thumbnail[generic-thumbnail='audio'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_audio.svg);
}

.no-thumbnail[generic-thumbnail='image'],
.no-thumbnail[generic-thumbnail='raw'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_image.svg);
}

.no-thumbnail[generic-thumbnail='video'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_video.svg);
}

/* grid view large icons for known types. */
.no-thumbnail[generic-thumbnail='archive'] {
  -webkit-mask-image: url(../images/filetype/filetype_archive.svg);
}

.no-thumbnail[generic-thumbnail='tini'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_tini.svg);
}

.no-thumbnail[generic-thumbnail='excel'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_excel.svg);
}

.no-thumbnail[generic-thumbnail='gdoc'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_gdoc.svg);
}

.no-thumbnail[generic-thumbnail='gdraw'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_gdraw.svg);
}

.no-thumbnail[generic-thumbnail='gsheet'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_gsheet.svg);
}

.no-thumbnail[generic-thumbnail='gslides'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_gslides.svg);
}

.no-thumbnail[generic-thumbnail='gtable'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_gtable.svg);
}

.no-thumbnail[generic-thumbnail='gform'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_gform.svg);
}

.no-thumbnail[generic-thumbnail='gmap'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_gmap.svg);
}

.no-thumbnail[generic-thumbnail='gsite'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_gsite.svg);
}

.no-thumbnail[generic-thumbnail='pdf'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_pdf.svg);
}

.no-thumbnail[generic-thumbnail='ppt'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_ppt.svg);
}

.no-thumbnail[generic-thumbnail='script'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_script.svg);
}

.no-thumbnail[generic-thumbnail='sites'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_sites.svg);
}

.no-thumbnail[generic-thumbnail='word'] {
  -webkit-mask-image: none;
  background-color: transparent;
  background-image: url(../images/filetype/filetype_word.svg);
}

/* Icons for volume types. A ".tree-row > .file-row" component in any rules
   means the rule only matches in files-ng. */
.tree-row > .file-row > [volume-type-icon='archive'] {
  -webkit-mask-image: url(../images/volumes/archive.svg);
}

.tree-row > .file-row > [root-type-icon='my_files'] {
  -webkit-mask-image: url(../images/volumes/my_files.svg);
}

.tree-row > .file-row > [volume-type-icon='downloads'],
.tree-row > .file-row > [file-type-icon='downloads'] {
  -webkit-mask-image: url(../images/volumes/downloads.svg);
}

[file-type-icon='downloads'] {
  -webkit-mask-image: url(../images/volumes/downloads.svg);
}

[file-type-icon='camera-folder'] {
  -webkit-mask-image: url(../images/volumes/camera.svg);
}

.tree-row > .file-row > [volume-type-icon='drive'] {
  -webkit-mask-image: url(../images/volumes/drive.svg);
}

.tree-row > .file-row > [volume-type-icon='shortcut'] {
  -webkit-mask-image: url(../images/volumes/shortcut.svg);
}

.drive-volume > .tree-row > .file-row > [volume-type-icon='drive'],
.tree-row > .file-row > [root-type-icon='drive'] {
  -webkit-mask-image: url(../images/volumes/service_drive.svg);
}

.tree-row > .file-row > [volume-type-icon='shared_drives_grand_root'] {
  -webkit-mask-image: url(../images/volumes/team_drive.svg);
}

.tree-row > .file-row > [volume-type-icon='team_drive'] {
  -webkit-mask-image: url(../images/volumes/hard_drive.svg);
}

.tree-row > .file-row > [volume-type-icon='computers_grand_root'] {
  -webkit-mask-image: url(../images/volumes/devices.svg);
}

.tree-row > .file-row > [volume-type-icon='computer'] {
  -webkit-mask-image: url(../images/volumes/computer.svg);
}

.tree-row > .file-row > [volume-type-icon='drive_offline'] {
  -webkit-mask-image: url(../images/volumes/offline.svg);
}

.tree-row > .file-row > [volume-type-icon='drive_shared_with_me'] {
  -webkit-mask-image: url(../images/volumes/shared.svg);
}

.tree-row > .file-row > [volume-type-icon='drive_recent'] {
  -webkit-mask-image: url(../images/volumes/recent.svg);
}

.tree-row > .file-row > [volume-type-icon='external_media'],
.tree-row > .file-row > [volume-type-icon='removable'],
.tree-row > .file-row > [root-type-icon='removable'] {
  -webkit-mask-image: url(../images/volumes/usb.svg);
}

.tree-row > .file-row > [volume-type-icon='removable'][volume-subtype='sd'] {
  -webkit-mask-image: url(../images/volumes/sd.svg);
}

.tree-row > .file-row > [volume-type-icon='removable'][volume-subtype='optical'] {
  -webkit-mask-image: url(../images/volumes/cd.svg);
}

.tree-row
    > .file-row > [volume-type-icon='media_view'][volume-subtype='images_root'],
.tree-row > .file-row > [root-type-icon='recent'][recent-file-type='image'] {
  -webkit-mask-image: url(../images/volumes/images.svg);
}

.tree-row > .file-row
    > [volume-type-icon='media_view'][volume-subtype='videos_root'],
.tree-row > .file-row > [root-type-icon='recent'][recent-file-type='video'] {
  -webkit-mask-image: url(../images/volumes/videos.svg);
}

.tree-row > .file-row
    > [volume-type-icon='media_view'][volume-subtype='audio_root'],
.tree-row > .file-row > [root-type-icon='recent'][recent-file-type='audio'] {
  -webkit-mask-image: url(../images/volumes/audio.svg);
}

.tree-row > .file-row > [volume-type-icon='mtp'] {
  -webkit-mask-image: url(../images/volumes/phone.svg);
}

[file-type-icon='removable'] {
  -webkit-mask-image: url(../images/volumes/hard_drive.svg);
}

.tree-row > .file-row > [volume-type-icon='removable'][volume-subtype='unknown'],
.tree-item .tree-item > .tree-row > .file-row > [volume-type-icon='removable'] {
  -webkit-mask-image: url(../images/volumes/hard_drive.svg);
}

.tree-row > .file-row > [root-type-icon='recent'] {
  -webkit-mask-image: url(../images/volumes/recent.svg);
}

[file-type-icon='crostini'] {
  -webkit-mask-image: url(../images/volumes/linux_files.svg);
}

.tree-row > .file-row > [root-type-icon='crostini'],
.tree-row > .file-row > [volume-type-icon='crostini'] {
  -webkit-mask-image: url(../images/volumes/linux_files.svg);
}

[file-type-icon='android_files'] {
  -webkit-mask-image: url(../images/volumes/android.svg);
}

.tree-row > .file-row > [volume-type-icon='android_files'] {
  -webkit-mask-image: url(../images/volumes/android.svg);
}

[file-type-icon='plugin_vm'] {
  -webkit-mask-image: url(../images/volumes/plugin_vm_ng.svg);
}

.tree-row > .file-row > [file-type-icon='plugin_vm'] {
  -webkit-mask-image: url(../images/volumes/plugin_vm_ng.svg);
}

.tree-row > .file-row > [volume-type-icon='smb'] {
  -webkit-mask-image: url(../images/volumes/smb.svg);
}

[file-type-icon='trash'] {
  -webkit-mask-image: url(../images/files/ui/delete_ng.svg);
}

.tree-row > .file-row > [root-type-icon='trash'],
.tree-row > .file-row > [volume-type-icon='trash'] {
  -webkit-mask-image: url(../images/files/ui/delete_ng.svg);
}
